<!DOCTYPE>
<html>
<head>
	<meta content="text/html;charset=UTF-8" http-equiv="Content-Type" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">
	<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<link rel='stylesheet' type='text/css' href='css/common.css'>
	<link href="css/home.css" rel="stylesheet" type="text/css" />
</head>

<body>	
	<!-- 导航条开始 -->
	<div class='navbar nav-fixed'>
			<ul>
				<li><a href="#">返回论坛</a></li>
				<li><a href="#">资源下载</a></li>
				<li><a href="#">天空</a></li>
				<li><a href="#">历史介绍</a></li>
				<li><a href="#">校园助手</a></li>
				<li><a href="#">娱乐</a></li>
				<li><a href="#">华农百科</a></li>
			</ul>
			<ul class='float-right'>
				<li class='active'>
					<a href="#">下载红满堂客户端</a>
					<div class='load'>
						<img class='load-top' src="img/nav-logo.png">
						<img src="img/nav-code.png">
						<a class='load-link' href="#"></a>
						<a class='load-link load-link-bottom' href="#"></a>
					</div>
				</li>
				<li><a href="#">提醒</a></li>
				<li><a href="sign.html">登录</a></li>
			</ul>
	</div>
<!-- 导航条结束 -->
<!-- 导航开始 -->
	<div class='nav-bg'>
		<div class='nav-box'>
			<div class='logo'></div>
			<ul class='nav'>
				<li><a href="index.html">首页</a></li><li><a href="search.html">所有商品</a></li><li><a href="release.html">发布商品</a></li><li><a href="help.html">用户帮助</a></li>
			</ul>
			<div class='search'>
				<input type='text'><button>搜索</button>
			</div>
		</div>
	</div>
	<div class='nav-border'></div>
<!-- 导航结束 -->


	<div class="show-pic">
		<!-- 轮播图样式 -->
		<div id="pics-carousel" class="carousel slide" data-ride="carousel">
		  <!-- 列表 -->
		  <ol class="carousel-indicators">
		    <li data-target="#pics-carousel" data-slide-to="0" class="active"></li>
		    <li data-target="#pics-carousel" data-slide-to="1"></li>
		    <li data-target="#pics-carousel" data-slide-to="2"></li>
		    <li data-target="#pics-carousel" data-slide-to="3"></li>
		  </ol>

		  <!-- 图片容器 -->
		  <div class="carousel-inner" role="listbox">
		    <div class="item active box">
		      <img src="img/1.jpg" class="img-responsive center-block" alt="msg-pic ">
		    </div>
		    <div class="item box">
		      <img src="img/2.jpg" class="img-responsive center-block"  alt="msg-pic">
		    </div>
		    <div class="item box">
		      <img src="img/3.jpg" class="img-responsive center-block"  alt="msg-pic">
		    </div>
		    <div class="item box">
		      <img src="img/4.jpg" class="img-responsive center-block"  alt="msg-pic">
		    </div>
		  </div>

		  <!-- 前后控制 -->
		  <a class="left carousel-control" href="#pics-carousel" role="button" data-slide="prev">
		    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
		    <span class="sr-only">Previous</span>
		  </a>
		  <a class="right carousel-control" href="#pics-carousel" role="button" data-slide="next">
		    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
		    <span class="sr-only">Next</span>
		  </a>
		</div>
	</div>

	<div class="msg">
		<!--目录-->
		<div class="menu">
            <div class="menu-title">市场目录</div>
            <div class="menu-wrap">
                <section class="menu-dig">
                    <div class="menu-bigcls">
                        <span>数码类</span>
                        <ul class="menu-smcls">
                            <li><a href="#">电脑硬件</a></li>
                            <li><a href="#">电脑软件</a></li>
                            <li><a href="#">影碟音带</a></li>
                            <li><a href="#">家用电器</a></li>
                            <li><a href="#">通讯产品</a></li>
                        </ul>
                    </div>

                </section>
                <section class="menu-job">
                    <div class="menu-bigcls">
                        <ul class="menu-smcls">
                            <li><a href="#">招聘兼职</a></li>
                        </ul>
                        <span>招聘兼职</span>
                    </div>
                </section>
                <section class="menu-bic">
                    <div class="menu-bigcls">
                        <span>单车特卖</span>
                        <ul class="menu-smcls">
                            <li><a href="#">二手单车</a></li>
                        </ul>
                    </div>
                </section>
                <section class="menu-day">
                    <div class="menu-bigcls">
                        <ul class="menu-smcls">
                            <li><a href="#">日常用品</a></li>
                            <li><a href="#">穿着衣物</a></li>
                        </ul>
                        <span>日常用品</span>
                    </div>
                </section>
                <section class="menu-ren">
                    <div class="menu-bigcls">
                        <span>房屋租赁</span>
                        <ul class="menu-smcls">
                            <li><a href="#">房屋租赁</a></li>
                        </ul>
                    </div>
                </section>
                <section class="menu-boo">
                    <div class="menu-bigcls">
                        <ul class="menu-smcls">
                            <li><a href="#">杂志</a></li>
                            <li><a href="#">公共课书籍</a></li>
                            <li><a href="#">专业课书籍</a></li>
                            <li><a href="#">外语</a></li>
                        </ul>
                        <span>书摊</span>
                    </div>
                </section>
                <section class="menu-other">
                    <div class="menu-bigcls">
                        <span>其他</span>
                    </div>
                </section>
            </div>
        </div>

        <!--出售收购模块-->
        <ul id="ul">
			<li><a href="javascript:;" class="active">出售</a></li>
			<li><a href="javascript:;">收购</a></li>
		</ul>
        <div class="sale-buy-div">
        	<div id="sale">
        		<div>
	        		<img src="img/thing.png" />
	        		<div class="left-div">
	        			<p>出售烂单车一部</p>
	        			<p>商品信息</p>
	        			<p>交易状态：<span>商品已过期<span></p>
	        		</div>
	        		<div class="right-div">
	        			<p>查看数:<span>20<span></p>
	        			<p>发布时间:<span>2015年12月3号</span></p>
	        		</div>
        		</div>

        		<div>
	        		<img src="img/thing.png" />
	        		<div class="left-div">
	        			<p>出售烂单车一部</p>
	        			<p>商品信息</p>
	        			<p>交易状态：<span>商品已过期<span></p>
	        		</div>
	        		<div class="right-div">
	        			<p>查看数:<span>20<span></p>
	        			<p>发布时间:<span>2015年12月3号</span></p>
	        		</div>
        		</div>

        		<div>
	        		<img src="img/thing.png" />
	        		<div class="left-div">
	        			<p>出售烂单车一部</p>
	        			<p>商品信息</p>
	        			<p>交易状态：<span>商品已过期<span></p>
	        		</div>
	        		<div class="right-div">
	        			<p>查看数:<span>20<span></p>
	        			<p>发布时间:<span>2015年12月3号</span></p>
	        		</div>
        		</div>

        		<div>
	        		<img src="img/thing.png" />
	        		<div class="left-div">
	        			<p>出售烂单车一部</p>
	        			<p>商品信息</p>
	        			<p>交易状态：<span>商品已过期<span></p>
	        		</div>
	        		<div class="right-div">
	        			<p>查看数:<span>20<span></p>
	        			<p>发布时间:<span>2015年12月3号</span></p>
	        		</div>
        		</div>

        		<div>
	        		<img src="img/thing.png" />
	        		<div class="left-div">
	        			<p>出售烂单车一部</p>
	        			<p>商品信息</p>
	        			<p>交易状态：<span>商品已过期<span></p>
	        		</div>
	        		<div class="right-div">
	        			<p>查看数:<span>20<span></p>
	        			<p>发布时间:<span>2015年12月3号</span></p>
	        		</div>
        		</div>
        	</div>

        	<div id="buy">
        		<div>
	        		<img src="img/thing.png" />
	        		<div class="left-div">
	        			<p>收购烂单车一部</p>
	        			<p>商品信息</p>
	        			<p>交易状态：<span>商品已过期<span></p>
	        		</div>
	        		<div class="right-div">
	        			<p>查看数:<span>20<span></p>
	        			<p>发布时间:<span>2015年12月3号</span></p>
	        		</div>
        		</div>

        		<div>
	        		<img src="img/thing.png" />
	        		<div class="left-div">
	        			<p>收购烂单车一部</p>
	        			<p>商品信息</p>
	        			<p>交易状态：<span>商品已过期<span></p>
	        		</div>
	        		<div class="right-div">
	        			<p>查看数:<span>20<span></p>
	        			<p>发布时间:<span>2015年12月3号</span></p>
	        		</div>
        		</div>

        		<div>
	        		<img src="img/thing.png" />
	        		<div class="left-div">
	        			<p>收购烂单车一部</p>
	        			<p>商品信息</p>
	        			<p>交易状态：<span>商品已过期<span></p>
	        		</div>
	        		<div class="right-div">
	        			<p>查看数:<span>20<span></p>
	        			<p>发布时间:<span>2015年12月3号</span></p>
	        		</div>
        		</div>

        		<div>
	        		<img src="img/thing.png" />
	        		<div class="left-div">
	        			<p>收购烂单车一部</p>
	        			<p>商品信息</p>
	        			<p>交易状态：<span>商品已过期<span></p>
	        		</div>
	        		<div class="right-div">
	        			<p>查看数:<span>20<span></p>
	        			<p>发布时间:<span>2015年12月3号</span></p>
	        		</div>
        		</div>

        		<div>
	        		<img src="img/thing.png" />
	        		<div class="left-div">
	        			<p>收购烂单车一部</p>
	        			<p>商品信息</p>
	        			<p>交易状态：<span>商品已过期<span></p>
	        		</div>
	        		<div class="right-div">
	        			<p>查看数:<span>20<span></p>
	        			<p>发布时间:<span>2015年12月3号</span></p>
	        		</div>
        		</div>
        	</div>
        </div>
	</div>


	<!--页尾-->
	<div class="footer">
		<img class="color" src="img/footer.png" />
		<div class="link-div">	
			<div class="footer1">
				<a href="#" class="footer-a">红满堂论坛</a>
				<a href="#">华南农业大学首页</a>
				<a href="#">华南农业大学教务处</a>
				<a href="#">华南农业大学论坛</a>
				<a href="#">华南农业大学论坛</a>
			</div>

			<div class="footer2">
				<a href="#">使用须知</a>
				<a href="#">用户必看</a>
				<a href="#">免责声明</a>
				<a href="#">建议投诉</a>
			</div>

			<div class="footer2">
				<p class="footer-p">联系我们</p>
				<p>QQ:<span>123456</span></p>
				<p class="footer-p3">邮箱：<span>84908079800</span></p>
			</div>

			<div class="footer3">
				<p>客户端下载</p>
				<a href="#"><img src="img/footer-code.png"/></a>
				<div>
					<a href="#"><img src="img/load3.png"/></a>
					<a href="#"><img src="img/load4.png"/></a>
				</div>
			</div>
		</div>

		<div class="footer4">
			<img src="img/footer-line.png"></img>
			<div>
				<p>Powered by 红满堂工作室</p>
			</div>
			<img src="img/footer-line.png"></img>
		<div>
	</div>


	<script src="js/jquery-2.1.1.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<!--响应式导航栏-->
	<script type="text/javascript">
		$(function(){
			var active=false;
			$("#nav-btn").on("click",function(){
				if(!active){
					$(".logo-nav ul").find("li").slideDown();
					$(".logo-nav form").slideDown();
					active=true;
				}else{
					$(".logo-nav form").slideUp();
					$(".logo-nav ul").find("li").slideUp();
					active=false;
				}
				
			})
		})

	</script>

	<!--切换出售和收购板块-->
	<script>
		window.onload=function(){
			var link=$("#ul").find("a");
			link.eq(0).val("#sale");
			link.eq(1).val("#buy");
			for(var i=0;i<link.length;i++){	
				link.eq(i).on("click",function(){
					for(var j=0;j<link.length;j++){
						link.eq(j).removeClass("active");
						$(link.eq(j).val()).css("display","none");
					}
					$(this).addClass("active");
					$($(this).val()).css("display","block");
				});
			}
		}
	</script>


</body>
</html>